iT邦幫忙

2021 iThome 鐵人賽

DAY 6
1
Modern Web

快搭上姐姐的`微`前端便車系列 第 6

第6車廂-恩~人家被勾到了拉:checked應用篇

  • 分享至 

  • xImage
  •  

本篇介紹偽類中的狀態選取器:checked應用篇:做一個開關按鈕

:checked介紹

:checked是分類在本刊第4篇選取器 > 偽類別(pseudo-class) > 狀態選取器 中,
簡單來說是判斷是否被勾選/取消勾選的選取器,可用在input type="checkbox"input type="radio"select 中的 option

https://ithelp.ithome.com.tw/upload/images/20210921/20142016HBtZq7VAi4.png

詳細可參考MDN介紹

常見的狀態選取器還有哪些?

:hover
:focus ...等

:checked 特色

  • 結合label標籤使用,透過label標籤能夠讓樣式(外觀)的更為豐富
  • 透過CSS就能做到"被勾選了...就能改變誰誰的外觀",不用靠js來做

本篇範例:做一個開關

整體流程是:
做一個開關所需的外觀labellabel::before > 搭配:checked 以及 相鄰兄弟選擇器+ > 將按鈕移動+變色

https://ithelp.ithome.com.tw/upload/images/20210922/20142016klyvR0tCa8.png

/*html*/
<div>
  <input type="checkbox" id="demoCheckbox">
  
  <label for="demoCheckbox" class="labelCheckbox">  </label>
</div>

/*css*/
#demoCheckbox{
  display:none;
}

.labelCheckbox{
    position: relative;
    width: 50px;
    height: 22px;
    padding: 3px;
    box-sizing: border-box;
    border-radius: 25px;
    background-color: #838383;
    display: inline-block;
}

.labelCheckbox::before{
    content: '';
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #fff;
    position: absolute;
    top: 0;
    left: 3px;
    bottom: 0;
    margin: auto;
    transition: left 0.5s;
}

#demoCheckbox:checked + .labelCheckbox::before {
      left: 31px; 
}

#demoCheckbox:checked + .labelCheckbox {
  background-color: rgba(25, 150, 250, 0.9
);
  

當然有多種寫法,只是如上寫法,對於是新手的我,覺得比較好了解
附上程式碼連結

小提醒:

  • input id="name"與 label for="name",name這二個名稱要一致喔!
    這樣才能透過點了label的外觀,可以觸發input checked的狀態
  • input checkbox 只是拿來利用的,最後沒有要出現在畫面上,所以會將它display:none起來; 用過就丟
  • 相鄰兄弟選擇器 + 以及 一般兄弟選擇器 ~ 這個觀念要去分辨喔!因為範例中擺放位置的關係,其實也可以用 一般兄弟選擇器 ~

延伸閱讀

那下一篇就來講講要怎麼結合js判斷是否被check吧


上一篇
第5車廂-一切都是假的!::before應用篇
下一篇
第7車廂-討厭~叫人家開要幹嘛?觸發check事件應用篇
系列文
快搭上姐姐的`微`前端便車30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言